import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
import '../PieChart/index.scss'
export default function Riskratio({ data }) {
    const chartRef = useRef(null)
    useEffect(() => {
        function renderChart() {
            const myChart = echarts.init(chartRef.current);
            const color = ['#165DFF', '#2CB8C5', '#F0B114', '#885BD2', '#B6D8F3']
            const option = {
                color,
                tooltip: {
                    trigger: "item",
                    padding: 0,
                    borderWidth: 0,
                    formatter: (params) => {
                        return `<div class="tooltip-area"><p>${params.marker}${params.name}</p><h4>${params.percent}%</h4></div>`
                    },
                },
                series: [
                    {
                        type: "pie",
                        radius: "65%",
                        center: ["50%", "50%"],
                        label: {
                            normal: {
                                formatter: "{xx|{b} }{yy|{d} %}",
                                rich: {
                                    xx: {
                                        fontSize: 12,
                                        lineHeight: 32,
                                        color: '#4E5969'
                                    },
                                    yy: {
                                        fontSize: 16,
                                        fontWeight: 600,
                                        lineHeight: 32,
                                        color: '#1D2129'
                                    }
                                }
                            }
                        },
                        data: data,
                        itemStyle: {
                            emphasis: { // 鼠标经过扇形区域时的阴影效果
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        },
                        labelLine: {
                            normal: {
                                length: 5,
                                length2: 20,
                                smooth: true
                            }
                        }
                    }
                ]
            }
            option && myChart.setOption(option);
        }
        renderChart()
    }, [data])
    return (
        <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
    )
}
